<!--
 * @Author: wangjianwhy wangjianwhy@sina.com
 * @Date: 2024-10-05 11:05:57
 * @LastEditors: wangjianwhy wangjianwhy@sina.com
 * @LastEditTime: 2024-10-23 08:55:53
 * @FilePath: \my-vue3-appg:\vscode-work\tlo-shopping\src\components\product\Slideshow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- 返回与分享 -->
    <OrderBackShare />

    <!-- 商品图片 -->
    <div id="shopping" class="carousel"  
          @mousedown="startDrag"
          @mouseup="endDrag"
          @mouseleave="endDrag"
          @mousemove="onDrag"
          @touchstart="startTouch"
          @touchmove="onTouchMove"
          @touchend="endTouch">
        <div class="carousel-container" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
          <div class="carousel-item" v-for="(image, index) in images" :key="index" @click="toggleFullscreen">
            <img :src="image" alt="" />
          </div>
        </div>
        <div class="dots">
          <span
            v-for="(image, index) in images"
            :key="index"
            :class="{ active: currentIndex === index }"
            @click="goToIndex(index)"
          ></span>
        </div>
        <div v-if="isFullscreen" class="fullscreen" @click="toggleFullscreen">
          <img :src="images[currentIndex]" alt="" />
        </div>
  </div>

</template>

<script setup>
import OrderBackShare from '@/components/OrderBackShare.vue';
import { defineProps, ref  } from 'vue';

const props = defineProps({
  shopId: {
    type: [String, Number],
    required: true
  }
});
console.log(props);

const images = ref([
  '/src/assets/lunbo/image1.jpeg',
  '/src/assets/lunbo/image1.jpeg',
  '/src/assets/lunbo/image1.jpeg'
]);

const currentIndex = ref(0);
const startX = ref(0);
const endX = ref(0);
const isFullscreen = ref(false);

const showNext = () => {
  currentIndex.value = (currentIndex.value + 1) % images.value.length;
};

const showPrevious = () => {
  currentIndex.value = (currentIndex.value - 1 + images.value.length) % images.value.length;
};

const startDrag = (event) => {
  startX.value = event.clientX;
};

const onDrag = (event) => {
  endX.value = event.clientX;
};

const endDrag = () => {
  if (startX.value > endX.value + 50) {
    showNext();
  } else if (startX.value < endX.value - 50) {
    showPrevious();
  }
};

const startTouch = (event) => {
  startX.value = event.touches[0].clientX;
};

const onTouchMove = (event) => {
  endX.value = event.touches[0].clientX;
};

const endTouch = () => {
  if (startX.value > endX.value + 50) {
    showNext();
  } else if (startX.value < endX.value - 50) {
    showPrevious();
  }
};

const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value;
};

const goToIndex = (index) => {
  currentIndex.value = index;
};
</script>

<style scoped>
.carousel {
  width: 100%; /* 正方形的宽度 */
  height: 100vw; /* 正方形的高度 */
  box-sizing: border-box; /* 确保宽度和高度包括边框 */
  background-color: lightblue; /* 背景颜色 */
  margin: 0em;
  padding: 0em;
  overflow: hidden;
  z-index: 10;
  position: relative;/* 根据需要调整高度 */
}
.carousel-container {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-item {
  min-width: 100%;
}
.carousel img {
  width: 100%;
  height: auto;
  cursor: pointer;
}
.dots {
  display: flex;
  justify-content: center;
  margin-top: 10px; /* 调整上下间距 */
  position: absolute; /* 使其相对于父容器定位 */
  bottom: 10px; /* 让小圆点距离底部有一定间距 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 确保居中 */
}
.dots span {
  width: 6px;
  height: 6px;
  margin: 0 5px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  z-index: 1000;
}
.dots .active {
  background-color: #fff;
}
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
.fullscreen img {
  max-width: 100%;
  max-height: 100%;
}

</style>